<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>css 透明波浪特效</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="wave.css"/>
</head>
<body>
<svg class="wave-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28" preserveAspectRatio="none">
  <defs>
    <path id="transparent-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
  </defs>
  <g class="wave-parallax">
    <use xlink:href="#transparent-wave" x="50" y="0" fill="rgba(224,233,239,.5)"></use>
    <use xlink:href="#transparent-wave" x="50" y="3" fill="rgba(224,233,239,.5)"></use>
    <use xlink:href="#transparent-wave" x="50" y="6" fill="rgba(224,233,239,.5)"></use>
  </g>
</svg>
</body>
</html>
